<template>
	<div class="cptxModel">
		<!-- 底部椭圆 -->
		<div class="bottomBg"></div>

		<!-- 中间主内容 -->
		<div class="center-content">
			<!-- 上方分支 -->
			<div class="branch-list">
				<canvas ref="lineCanvas" class="dashed-lines"></canvas>
				<div
					class="branch-item"
					v-for="branch in branches"
					:key="branch.icon"
					:style="{ left: branch.left, top: branch.top }"
				>
					<img :src="branch.icon" class="branch-icon" />
				</div>
			</div>
			<!-- 三大类型 -->
			<div class="main-categories">
				<div class="main-cat" v-for="cat in categories" :key="cat.title">
					<div class="cat-title">{{ cat.title }}</div>
					<img :src="cat.icon" class="cat-icon" />
				</div>
			</div>

			<div class="title-box">产品体系</div>
		</div>

		<!-- 两侧大背景 -->
		<div class="mainBox">
			<div class="lf" @click="jump">
				<div class="side-title">
					<img :src="cptx" alt="产品体系" />
				</div>
				<div class="side-list">
					<div class="side-item" v-for="item in leftList" :key="item.text">
						<span>{{ item.text }}</span>
					</div>
				</div>
			</div>
			<div class="rg">
				<div class="side-bg"></div>
				<div class="side-title"><img :src="hzms" alt="合作模式" /></div>
				<div class="side-list">
					<div class="side-item" v-for="item in rightList" :key="item.text">
						<span>{{ item.text }}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, ref, nextTick } from 'vue';
import lfbg from '@/assets/img/lfbg.png';
import rgbg from '@/assets/img/rgbg.png';
import cptx from '@/assets/img/cptx.png';
import hzms from '@/assets/img/hzms.png';
import icon1 from '@/assets/img/1.png';
import icon2 from '@/assets/img/2.png';
import icon3 from '@/assets/img/3.png';
import icon4 from '@/assets/img/4.png';
import icon5 from '@/assets/img/5.png';
import icon6 from '@/assets/img/6.png';
import icon7 from '@/assets/img/7.png';
import icon8 from '@/assets/img/8.png';
import zw from '@/assets/img/cptx-zw.png';
import zw1 from '@/assets/img/cptx-zw1.png';
import hy from '@/assets/img/cptx-hy.png';
import { useRouter } from 'vue-router';

const router = useRouter();
const jump = () => {
	console.log(11111);

	router.push('/hunanMap');
};

const leftList = [{ text: '基础版' }, { text: '标准版' }, { text: '定制版' }];
const rightList = [{ text: '服务采购' }, { text: '共建模式' }, { text: '设备采购' }];
const categories = [
	{ title: '政务巡检', icon: zw },
	{ title: '行业巡检', icon: hy },
	{ title: '政务巡检', icon: zw1 }
];
const branches = [
	{ icon: icon1, left: '20%', top: '7%' },
	{ icon: icon2, left: '28%', top: '0%' },
	{ icon: icon3, left: '38%', top: '-2%' },
	{ icon: icon4, left: '48%', top: '-6%' },
	{ icon: icon5, left: '56%', top: '-2%' },
	{ icon: icon6, left: '64%', top: '0%' },
	{ icon: icon7, left: '71%', top: '8%' },
	{ icon: icon8, left: '78%', top: '14%' }
];

const lineCanvas = ref(null);

onMounted(async () => {
	await nextTick();
	drawDashedLines();
});

function drawDashedLines() {
	const canvas = lineCanvas.value;
	if (!canvas) return;
	const parent = canvas.parentElement;
	const width = parent.offsetWidth;
	const height = parent.offsetHeight;
	canvas.width = width;
	canvas.height = height;
	const ctx = canvas.getContext('2d');
	ctx.clearRect(0, 0, width, height);
	ctx.strokeStyle = '#00eaff';
	ctx.lineWidth = 2;
	ctx.setLineDash([6, 6]);
	ctx.globalAlpha = 0.5;

	// 行业巡检图标底部半圆参数
	const mainCatBox = parent.parentElement.querySelector('.main-categories');
	const hyCat = mainCatBox.children[1]; // 行业巡检
	const hyRect = hyCat.getBoundingClientRect();
	const parentRect = parent.getBoundingClientRect();
	const hyX = hyRect.left - parentRect.left + hyRect.width / 2;
	const hyY = hyRect.top - parentRect.top + hyRect.height / 2 + 50; // 图标底部中心
	const r = 32; // 半径，需与cat-icon高度匹配

	// 计算半圆上的分布点
	const n = branches.length;
	for (let i = 0; i < n; i++) {
		const angle = Math.PI + (Math.PI * i) / (n - 1); // 180°~360°
		const endX = hyX + r * Math.cos(angle);
		const endY = hyY + r * Math.sin(angle);

		// 分支icon中心
		const branchEl = parent.querySelectorAll('.branch-item')[i];
		const rect = branchEl.getBoundingClientRect();
		const x = rect.left - parentRect.left + rect.width / 2;
		const y = rect.top - parentRect.top + rect.height / 2;

		ctx.beginPath();
		ctx.moveTo(x, y);
		ctx.lineTo(endX, endY);
		ctx.stroke();
	}
	ctx.setLineDash([]);
	ctx.globalAlpha = 1;
}
</script>

<style lang="scss" scoped>
.cptxModel {
	height: 370px;
	position: relative;
	.mainBox {
		display: flex;
		position: absolute;
		width: 775px;
		left: 50%;
		transform: translateX(-50%);
		justify-content: space-between;
		bottom: 60px;
		.lf,
		.rg {
			width: 225px;
			height: 112px;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10px;
		}
		.lf {
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-image: url('@/assets/img/lfbg.png');
		}
		.rg {
			flex-direction: row-reverse;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-image: url('@/assets/img/rgbg.png');
		}
		.side-title {
			// position: absolute;
			// top: 18px;
			// left: 32px;
			// color: #00eaff;
			// font-size: 20px;
			// font-weight: bold;
			// z-index: 2;
			img {
				width: 64px;
				height: 44px;
			}
		}
		.rg .side-title {
			left: unset;
			right: 32px;
			text-align: right;
		}
		.side-list {
			display: flex;
			flex-direction: column;
			justify-content: center;
			font-size: 12px;
			color: #01eeff;
			align-items: center;
			// position: absolute;
			// top: 54px;
			// left: 0;
			// width: 100%;
			// z-index: 2;
			.side-item {
				display: flex;
				align-items: center;

				span {
					font-size: 12px;
					color: #01eeff;
				}
			}
		}
		.rg .side-list {
			left: 0;
			right: 0;
			text-align: center;
		}
	}
	.title-box {
		z-index: 99;
		width: 141px;
		height: 41px;
		position: absolute;
		left: 50%;
		text-align: center;
		line-height: 41px;
		transform: translateX(-50%);
		background: url('@/assets/img/titleBg.png') no-repeat center center;
		background-size: 100% 100%;
		color: #fff;
		font-size: 20px;
		font-weight: bold;
		cursor: pointer;
		bottom: 25px;
		letter-spacing: 4px;
	}
	.center-content {
		position: absolute;
		left: 50%;
		top: 0;
		width: 1000px;
		height: 100%;
		transform: translateX(-50%);
		.branch-list {
			position: absolute;
			width: 100%;
			height: 160px;
			left: 0;
			bottom: 80px;
			.branch-item {
				position: absolute;
				transform: translateX(-50%);
				display: flex;
				flex-direction: column;
				align-items: center;
				.branch-icon {
					width: 64px;
					height: 44px;
				}
			}
			.dashed-lines {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 120px;
				pointer-events: none;
				z-index: 0;
			}
		}
		.main-categories {
			position: absolute;
			height: 100px;
			width: 400px;
			left: 50%;
			transform: translateX(-50%);
			bottom: 80px;
			display: flex;
			justify-content: space-between;
			.main-cat {
				display: flex;
				flex-direction: column;
				align-items: center;
				.cat-icon {
					width: 60px;
					height: 60px;
				}
				.cat-title {
					font-size: 14px;
					color: #ffffff;
				}
			}
		}
		.main-btn {
			position: absolute;
			left: 50%;
			top: 220px;
			transform: translateX(-50%);
			display: flex;
			flex-direction: column;
			align-items: center;
			img {
				width: 220px;
				height: 48px;
			}
			span {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				color: #fff;
				font-size: 22px;
				font-weight: bold;
				letter-spacing: 4px;
				text-shadow: 0 0 12px #00eaff88;
			}
		}
	}
	.bottomBg {
		width: 558px;
		height: 88px;
		position: absolute;
		bottom: 26px;
		left: 50%;
		transform: translateX(-50%);
		background: url('@/assets/img/cptxbg1.png') no-repeat center center;
		background-size: 100% 100%;
	}
}
</style>
